<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between" class="addTest">
        <span style="fontSize:14px;color:#ffc0cb"
          >说明：目前支持学科和关键字条件筛选</span
        >
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="$router.push('/entering')"
          >新增试题</el-button
        >
      </el-row>
      <el-form ref="form" :model="searchData" class="fromlist">
        <div class="el-row">
          <el-row type="flex">
            <el-form-item label-width="80px" label="学科" class="fromitem">
              <el-select
                v-model="searchData.subjectID"
                placeholder="请选择"
                @change="getdirectorys($event)"
              >
                <el-option
                  v-for="item in simple"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px" label="二级目录" class="fromitem ">
              <el-select v-model="searchData.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in mysecondMenus"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px" label="标签" class="fromitem">
              <el-select v-model="searchData.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px" label="关键字" class="fromitem">
              <el-input
                v-model="searchData.keyword"
                class="ipwidth"
                placeholder="根据题干搜索"
              />
            </el-form-item>
          </el-row>
          <el-row type="flex">
            <el-form-item label-width="80px" label="试题类型" class="fromitem">
              <el-select v-model="searchData.questionType" placeholder="请选择">
                <el-option label="单选" value="1"> </el-option>
                <el-option label="多选" value="2"> </el-option>
                <el-option label="简答" value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px" label="难度" class="fromitem">
              <el-select v-model="searchData.difficulty" placeholder="请选择">
                <el-option label="简单" value="1"> </el-option>
                <el-option label="一般" value="2"> </el-option>
                <el-option label="困难" value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px" label="方向" class="fromitem">
              <el-select v-model="searchData.direction" placeholder="请选择">
                <el-option
                  v-for="item in mydirection"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px" label="录入人" class="fromitem ">
              <el-select v-model="searchData.creatorID" placeholder="请选择">
                <el-option label="超级管理员" value="1"> </el-option>
                <el-option label="录入管理员" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row type="flex">
            <el-form-item label-width="80px" label="题目备注" class="fromitem">
              <el-input v-model="searchData.remarks"></el-input>
            </el-form-item>
            <el-form-item
              label-width="80px"
              label="企业简称"
              class="fromitem el-col el-col-6"
            >
              <el-input v-model="searchData.shortName"></el-input>
            </el-form-item>
            <el-form-item label-width="80px" label="城市" class="fromitem">
              <el-select
                style="width:40%"
                v-model="searchData.province"
                placeholder="请选择"
                @change="choseCity($event)"
              >
                <el-option
                  v-for="(item, index) in myprovinces"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                style="width:40%"
                v-model="searchData.city"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in mycitys"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="el-col el-col-6">
              <el-button @click="dele">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-row>
        </div>
      </el-form>
      <!-- 详情表格 -->
      <template>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="全部" name="first">
            <checked
              :allQuestions="allQuestions"
              :simple="simple"
              :total="total"
              :secondMenus="secondMenus"
              :mydirection="mydirection"
              @del="delRowData($event)"
              @changePush="changePush($event)"
              @getcheck="getcheck($event)"
            />
          </el-tab-pane>
          <el-tab-pane label="待审核" name="second">
            <checked
              :allQuestions="waitchkState"
              :simple="simple"
              :secondMenus="secondMenus"
              :mydirection="mydirection"
              @del="delRowData($event)"
              @changePush="changePush($event)"
              @getcheck="getcheck($event)"
            />
          </el-tab-pane>
          <el-tab-pane label="已审核" name="third">
            <checked
              :allQuestions="pushchkState"
              :simple="simple"
              :secondMenus="secondMenus"
              :mydirection="mydirection"
              @del="delRowData($event)"
              @changePush="changePush($event)"
              @getcheck="getcheck($event)"
            />
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth"
            ><checked
              :allQuestions="refusechkState"
              :simple="simple"
              :secondMenus="secondMenus"
              :mydirection="mydirection"
              @del="delRowData($event)"
              @changePush="changePush($event)"
              @getcheck="getcheck($event)"
          /></el-tab-pane>
        </el-tabs>
      </template>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="searchData.pagesize"
          layout="sizes, prev, pager, next, jumper"
          background
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import checked from "./checked.vue";
import {
  getSimple,
  getQuestions,
  getCatalogue,
  getdirectorys,
  delquestions,
  pushquestions,
  getTags,
  getcheck
} from "@/api/choiceness";
import { provinces, citys } from "@/utils/citys";
export default {
  components: {
    checked
  },
  data() {
    return {
      activeName: "first",
      simple: [], // 简单科目列表
      // 全部的题库
      allQuestions: [],
      // chkState	否	0 待审核 1 通过 2 拒绝	审核状态
      // 搜索信息
      searchData: {
        subjectID: "", // 学科
        difficulty: "", // 难度
        questionType: "", // 试题类型
        tags: "", // 标签名称
        province: "", // 企业所在地省份
        city: "", // 企业所在城市
        keyword: "", // 关键字
        remarks: "", // 题目备注
        shortName: "", // 企业简称
        direction: "", // 方向
        creatorID: "", // 录入人
        catalogID: "", // 目录
        chkState: "", // 审核状态
        publishState: "", //上架
        page: 1,
        pagesize: 5
      },
      total: 0,
      mypages: {
        page: 1,
        pagesize: 5
      },
      mydirection: [
        { value: "o2o", id: 1 },
        { value: "外包服务", id: 2 },
        { value: "企业服务", id: 3 },
        { value: "互联网金融", id: 4 },
        { value: "企业咨询", id: 5 },
        { value: "互联网", id: 6 },
        { value: "电子商务", id: 7 },
        { value: "其他", id: 8 }
      ],
      myprovinces: [],
      mycitys: [],
      // 第二目录
      secondMenus: [],
      mysecondMenus: [],
      tagsList: [],
      currentPage: 1,
      pushchkState: [], // 通过审核
      refusechkState: [], // 拒绝审核
      waitchkState: [] //待审核
    };
  },
  created() {
    // this.mycitys = citys();
    this.myprovinces = provinces();
    this.getSimple();
    this.getQuestions();
    this.getCatalogue();
  },
  methods: {
    // 获取简单学科
    async getSimple() {
      const { data } = await getSimple();
      this.simple = data;
    },
    // 获取所有的题库
    async getQuestions(a) {
      if (a) {
        // 声明一个空对象 遍历a对象 将不等于空的属性值传到新对象里
        let newA = {};
        for (let k in a) {
          if (a[k] !== "") {
            newA[k] = a[k];
          }
        }
        // console.log(newA);
        const { data } = await getQuestions(newA);
        this.allQuestions = data.items;
        this.searchData.page = data.page;
        this.searchData.pagesize = parseInt(data.pagesize);
        this.total = data.counts;
        // console.log(this.total);
      } else {
        const { data } = await getQuestions(this.mypages);
        this.allQuestions = data.items;
        this.searchData.page = data.page;
        this.searchData.pagesize = parseInt(data.pagesize);
        this.total = data.counts;
      }

      // console.log(this.allQuestions);
      this.allQuestions.forEach(item => {
        if (item.chkState == 0) {
          this.waitchkState.push(item);
        } else if (item.chkState == 1) {
          this.pushchkState.push(item);
        } else {
          this.refusechkState.push(item);
        }
      });
    },
    // 获取目录
    async getCatalogue() {
      const id = this.simple.filter(item => item.value);
      const { data } = await getCatalogue(id);
      this.secondMenus = data.items;
    },
    // 城市选择
    choseCity(e) {
      if (e) {
        this.mycitys = citys(e);
      }
    },
    // 获取对应目录和标签
    async getdirectorys(e) {
      if (e) {
        const aa = [];
        this.secondMenus.forEach(item => {
          aa.push(item);
        });
        this.mysecondMenus = aa;
        const { data } = await getTags({ subjectID: e });
        this.tagsList = data;
      }
    },
    // 搜索
    onSubmit() {
      this.getQuestions(this.searchData);
    },
    // 清除表单元素
    dele() {
      // this.$refs.form.resetFields()
      this.searchData = {
        subjectID: "", // 学科
        difficulty: "", // 难度
        questionType: "", // 试题类型
        tags: "", // 标签名称
        province: "", // 企业所在地省份
        city: "", // 企业所在城市
        keyword: "", // 关键字
        remarks: "", // 题目备注
        shortName: "", // 企业简称
        direction: "", // 方向
        creatorID: "", // 录入人
        catalogID: "", // 目录
        chkState: "", // 审核状态
        publishState: "",
        chkRemarks: "" //审核意见
      };
      this.mysecondMenus = [];
      this.getQuestions();
    },
    // 删除单行元素
    async delRowData(e) {
      try {
        await delquestions(e);
        console.log(11);
        this.$message.success("删除成功");
        this.getQuestions();
      } catch (error) {
        console.log(error);
      }
    },
    // 上架下架
    async changePush(e) {
      this.searchData.publishState = e.publishState;
      await pushquestions(e);
      // console.log(this.searchData);
      this.getQuestions();
    },
    // 审核
    async getcheck(e) {
      this.searchData.chkState = e.chkState;
      this.chkRemarks = e.chkRemarks;
      console.log(e);
      await getcheck(e);
      this.$message.success("审核成功");
      this.getQuestions();
    },
    // 分页
    handleSizeChange(val) {
      this.mypages.pagesize = val;
      this.getQuestions();
    },
    handleCurrentChange(val) {
      this.mypages.page = val;
      this.getQuestions();
    }
    // 判断传递的数据

    // 标签切换
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // }
  }
};
</script>

<style lang="scss" scoped>
.fromlist {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 20px;
  .el-row{
    width: 100%;
  }
  .fromitem {
    width: 25%;
    min-width: 25%;
    max-width: 25%;
  }
}
.el-form-item {
  .el-input,
  .el-select {
    width: 70%;
  }
}
</style>

